<template>
  <div class="common-page-container">
    <a-tabs v-model:activeKey="activeTab">
      <!-- 字典类型页签 -->
      <a-tab-pane key="type" :tab="t('dict.type')">
        <a-card :bordered="false" class="common-content-card">
          <!-- 字典类型搜索表单 -->
          <type-search-form
            :query-params="typeSearchForm"
            @search="handleTypeSearch"
            @reset="resetTypeSearch"
            class="common-search-form"
          />

          <!-- 字典类型操作和表格 -->
          <type-table-operations 
            :selected-count="typeSelectedRowKeys.length" 
            :search-form="typeSearchForm"
            @add="handleAddType" 
            @batch-delete="handleBatchDeleteType" 
            @export="handleExportType" 
            @refresh="loadTypeData"
            @search="handleTypeSearch" 
            @reset="resetTypeSearch"
            class="common-table-operations"
          />
          <!-- 字典类型表格 -->
          <type-table 
            :columns="typeColumns" 
            :data="typeList" 
            :loading="typeLoading" 
            :pagination="typePagination"
            :selected-row-keys="typeSelectedRowKeys" 
            @selection-change="onTypeSelectChange"
            @table-change="handleTypeTableChange" 
            @view-data="handleViewData" 
            @edit="handleEditType"
            @delete="handleDeleteType" 
          />
          <!-- 加载出错或无数据时显示重试按钮 -->
          <empty 
            :loading="typeLoading" 
            :load-error="typeLoadError" 
            :error-message="typeErrorMessage"
            :data-list="typeList" 
            :empty-text-key="'dict.emptyData'" 
            @retry="loadTypeData" 
          />
          <!-- 字典类型表单弹窗 -->
          <type-form-modal 
            v-model:open="typeModalVisible" 
            :title="typeFormTitle" 
            :form="typeFormData"
            :loading="typeSubmitLoading" 
            @submit="handleTypeModalOk"
            class="common-modal-form"
          />
        </a-card>
      </a-tab-pane>

      <!-- 字典数据页签 -->
      <a-tab-pane key="data" :tab="t('dict.data')" :disabled="!currentDictType">
        <template v-if="currentDictType">
          <a-card :bordered="false" class="common-content-card">
            <!-- 字典数据搜索表单 -->
            <data-search-form
              :query-params="dataSearchForm"
              :dict-type-name="currentDictTypeName"
              @search="handleDataSearch"
              @reset="resetDataSearch"
              @back="activeTab = 'type'"
              class="common-search-form"
            />
            <!-- 字典数据操作和表格 -->
            <data-table-operations 
              :selected-count="dataSelectedRowKeys.length" 
              :search-form="dataSearchForm"
              @add="handleAddData" 
              @batch-delete="handleBatchDeleteData" 
              @refresh="loadDataData"
              @search="handleDataSearch" 
              @reset="resetDataSearch"
              class="common-table-operations"
            />

            <!-- 字典数据表格 -->
            <data-table 
              :columns="dataColumns" 
              :data="dataList" 
              :loading="dataLoading" 
              :pagination="dataPagination"
              :selected-row-keys="dataSelectedRowKeys" 
              @selection-change="onDataSelectChange"
              @table-change="handleDataTableChange" 
              @edit="handleEditData" 
              @delete="handleDeleteData" 
            />

            <!-- 加载出错或无数据时显示重试按钮 -->
            <empty 
              :loading="dataLoading" 
              :load-error="dataLoadError" 
              :error-message="dataErrorMessage"
              :data-list="dataList" 
              :empty-text-key="'dict.emptyData'" 
              @retry="loadDataData" 
            />

            <!-- 字典数据表单弹窗 -->
            <data-form-modal 
              v-model:open="dataModalVisible" 
              :title="dataFormTitle" 
              :form="dataFormData"
              :loading="dataSubmitLoading" 
              @submit="handleDataModalOk"
              class="common-modal-form"
            />
          </a-card>
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
// 组件
import TypeTableOperations from './components/TypeTableOperations.vue'
import TypeTable from './components/TypeTable.vue'
import TypeFormModal from './components/TypeFormModal.vue'
import TypeSearchForm from './components/TypeSearchForm.vue'
import DataTableOperations from './components/DataTableOperations.vue'
import DataTable from './components/DataTable.vue'
import DataFormModal from './components/DataFormModal.vue'
import DataSearchForm from './components/DataSearchForm.vue'
import Empty from '@/components/common/Empty.vue'
import useDictManagement from './hooks/useDictManagement'
import { useTypeTableColumns, useDataTableColumns } from './config/tableColumns'

const { t } = useI18n() 

defineOptions({
  name: 'DictManagement'
})

// 使用字典管理钩子
const {
  // 基础状态
  activeTab,
  currentDictType,
  currentDictTypeName,

  // 字典类型状态
  typeList,
  typeLoading,
  typePagination,
  typeSelectedRowKeys,
  typeModalVisible,
  typeSubmitLoading,
  typeFormTitle,
  typeFormData,
  typeLoadError,
  typeErrorMessage,
  typeSearchForm,

  // 字典数据状态
  dataList,
  dataLoading,
  dataPagination,
  dataSelectedRowKeys,
  dataModalVisible,
  dataSubmitLoading,
  dataFormTitle,
  dataFormData,
  dataLoadError,
  dataErrorMessage,
  dataSearchForm,

  // 字典类型方法
  handleTypeSearch,
  resetTypeSearch,
  handleTypeTableChange,
  onTypeSelectChange,
  handleAddType,
  handleEditType,
  handleTypeModalOk,
  handleDeleteType,
  handleBatchDeleteType,
  handleExportType,
  handleViewData,
  loadTypeData,

  // 字典数据方法
  handleDataSearch,
  resetDataSearch,
  handleDataTableChange,
  onDataSelectChange,
  handleAddData,
  handleEditData,
  handleDataModalOk,
  handleDeleteData,
  handleBatchDeleteData,
  loadDataData
} = useDictManagement()

// 表格列配置
const typeColumns = useTypeTableColumns()
const dataColumns = useDataTableColumns()
</script>

<style lang="scss" scoped>
.common-page-container {
  padding: 16px;
}
</style>